<template>
  <view class="container flex-column">
    <view class="container-box">
      <view
        class="box1 radius-8 shadow"
        v-for="(item, index) in boxData"
        :key="index"
      >
        <image class="box1-left" :src="item.img" mode="widthFix"> </image>
        <view class="box1-right">
          <text style="font-size: 32rpx; font-weight: bold">
            {{ item.title }}</text
          >
          <text style="font-size: 22rpx">{{ item.desc }}</text>
        </view>
      </view>
    </view>
    <view class="container-manage">
      <view
        class="manage-item"
        v-for="(value, index) in toolsData"
        :key="index"
      >
        <up-image
          width="60rpx"
          height="60rpx"
          :src="value.img"
          mode="widthFix"
          lazy-load
        ></up-image>
        <view>{{ value.name }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const boxData = reactive([
  {
    img: "/static/icon/task-min.png",
    title: "租机流程",
    desc: "Rental process",
  },
  {
    img: "/static/icon/book-min.png",
    title: "租机必读",
    desc: "Renting Guide",
  },
]);
const toolsData = reactive([
  {
    img: "/static/icon/cafe-min.png",
    name: "租赁",
  },
  {
    img: "/static/icon/install-min.png",
    name: "安装",
  },
  {
    img: "/static/icon/tool-min.png",
    name: "报修",
  },
  {
    img: "/static/icon/money-min.png",
    name: "续费",
  },
  {
    img: "/static/icon/refresh-min.png",
    name: "回收",
  },
]);
</script>

<style lang="scss" scoped>
.container-box {
  display: flex;
  gap: 20rpx;
  width: 100%;
  justify-content: space-between;
  .box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20rpx;
    width: 48%;
    padding: 40rpx 0;
    .box1-left {
      width: 80rpx;
      height: 80rpx;
    }
    .box1-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 150rpx;
      height: 80rpx;
    }
  }
}
.container-manage {
  display: flex;
  justify-content: space-around;
  width: 100%;
  .manage-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80rpx;
  }
}
</style>
